<template>
    <div>
        <div class="header">
            <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
                background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
                <el-menu-item index="1">发现音乐</el-menu-item>
                <el-menu-item index="2">我的音乐</el-menu-item>
                <el-menu-item index="3">关注</el-menu-item>
                <el-menu-item index="4">商城</el-menu-item>
                <el-menu-item index="5">音乐人</el-menu-item>
                <el-menu-item index="6">云推哥</el-menu-item>
                <el-menu-item index="7">下载客户端</el-menu-item>
                <el-input v-model="searchForm.keywords" placeholder="音乐/视频/电台/用户"></el-input>
                <el-button type="primary" @click="search()">搜索</el-button>
                <el-button type="success" @click="login">登录</el-button>
                <el-button type="success" @click="Gotouser">用户</el-button>
            </el-menu>
        </div>
        <div style="width: 100%; background: linear-gradient(rgb(155 55 55), rgb(170 131 131));">
            <div class="banner">
                <el-carousel :interval="5000" arrow="always">
                    <el-carousel-item v-for="(item, index) in bannerURL" :key="item.id">
                        <img style="width: 100%; height: 100%;" :src=item>
                    </el-carousel-item>
                </el-carousel>
            </div>
        </div>

        <div style="display: flex; justify-content: space-evenly;">


            <div class="Recommendmusiclist" style="overflow: hidden; height: 758px;">
                <span style="color: red; font-size: 20px; width: 150px; height: 40px;display: inline-block;">推荐歌单</span>
                <span class="MoreRecommendmusiclist" @click="MoreRecommendmusic()">更多 -></span>
                <div v-for="(item, index) in recommendMusicList" :key="item.id">
                    <img style="width: 50px; height: 50px;" v-if="item.picUrl" :src="item.picUrl">
                    <span style="font-size: 18px;">{{ item.name }}</span>
                </div>
            </div>


            <div class="RecommendRadiolist">
                <span style="color: red; font-size: 20px; width: 150px; height: 40px;display: inline-block;">推荐电台</span>
                <span class="MoreRecommendmusiclist" @click="MoreRecommendradio()">更多 -></span>
                <div v-for="(item, index) in recommendRadioList" :key="item.id">
                    <img style="width: 50px; height: 50px;" v-if="item.picUrl" :src="item.picUrl">
                    <span style="font-size: 18px;">{{ item.name }}</span>
                </div>
            </div>

            <div class="hotmusiclist">
                <span style="color: red; font-size: 20px; width: 150px; height: 40px;display: inline-block;">热搜列表</span>
                <span class="Morehotmusiclist" @click="Morehotmusic()"> 更多 -></span>
                <div v-for="(item, index) in hotMusicList" :key="item.id">
                    <img style="width: 20px; height: 20px;" v-if="item.iconUrl" :src="item.iconUrl" alt="">
                    <span style="font-size: 18px;">{{ item.searchWord }}</span>
                </div>
            </div>
        </div>


    </div>


</template>
<script>
import { Search } from '../api/search'
import { Banner } from '../api/banner'
import { HotMusic, RecommendMusic, RecommendRadio } from '../api/hotmusic'
export default {
    data() {
        return {
            activeIndex2: '1',
            searchForm: {
                keywords: '陶喆天天'  // 搜索关键字
            },
            banner: [],
            bannerURL: [],
            //热搜歌单
            hotMusicList: [],
            recommendMusicList: [],
            recommendRadioList: [],
        };
    },
    methods: {
        handleSelect(key, keyPath) {
            console.log(key, keyPath);
        },
        login() {
            this.$router.push('/login')
        },
        Gotouser() {
            this.$router.push('/user')
        },
        search() {
            if (this.searchForm.keywords == '') {
                this.$message({
                    message: '请输入搜索内容',
                    type: 'warning'
                });
            } else {
                this.$router.push({
                    path: '/search',
                    query: {
                        keywords: this.searchForm.keywords,
                        type: 1
                    }
                })

            }
        },
        async Banner() {
            try {
                let res = await Banner();
                // console.log(res, '接口数据')
                this.banner = res.banners
                this.bannerURL = this.banner.map(item => item.pic)
                // console.log(this.bannerURL)
            } catch (error) {
                console.log(error)
            }
        },

        async HotMusic() {
            try {
                let res = await HotMusic();
                this.hotMusicList = res.data
                // console.log(this.hotMusicList, '热搜歌单')
            } catch (error) {
                console.log(error)
            }
        },
        async RecommendMusic() {
            try {
                let res = await RecommendMusic();
                this.recommendMusicList = res.result
                // console.log(this.recommendMusicList, '推荐歌单')
            } catch (error) {
                console.log(error)
            }
        },
        async RecommendRadio() {
            try {
                let res = await RecommendRadio();
                console.log(res.result, '推荐电台')
                this.recommendRadioList = res.result
            } catch (error) {
                console.log(error)
            }
        },
        MoreRecommendmusic() {
            this.$router.push('/MoreRecommendmusic')
        },
        MoreRecommendradio() {
            this.$router.push('/MoreRecommendRadio')
        },
        Morehotmusic() {
            this.$router.push('/Morehotmusic')
        }

    },
    mounted() {
        this.Banner()
        this.HotMusic()
        this.RecommendMusic()
        this.RecommendRadio()
    }
}
</script>
<style lang="css" scoped>
.el-input {
    margin-top: 10px;
    width: 300px;
}

.banner {
    width: 50%;
    margin: 0 auto;

    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
}
.RecommendRadiolist{
    width: 500px;
}
.RecommendRadiolist > div{
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}
</style>